<template>
	<view class="ac-app" :class="['relative', props._class, _isGray ? 'gray' : '']"
		:style="[{ width: appConfig.width + 'px', minHeight: appConfig.height + 'px' }, _style, props._style]">
		<slot></slot>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { pub_props, computedColor, computedGray } from '@/uni_modules/ac-ui/utils/minxs/props';

const props = defineProps({
	...pub_props,
	color: {
		type: String,
		default: 'appBg',
	},
	linear: {
		type: Boolean,
		default: false,
	},
	grayPage: {
		type: Boolean,
		default: false,
	},
	_class: {
		type: String,
	},
	_style: {
		type: String,
	},
});

let isCustomHeader = false;

const _isGray = computed(() => {
	// if (props.grayPage) {
	// 	return computedGray()
	// }
});

const sysinfo = uni.getSystemInfoSync();
let appsys = uni.getWindowInfo();

// 视察的宽。
const view_width = ref(sysinfo.windowWidth);
//视窗的高度。
let view_height = ref(sysinfo.windowHeight);

if (!isCustomHeader) {
	if (sysinfo.osName == 'android') {
		view_height.value = appsys.safeArea.height - 44 - appsys.safeAreaInsets.bottom;
	} else {
		view_height.value = appsys.safeArea.height - 44;
	}
} else {
	view_height.value = appsys.safeArea.height + appsys.statusBarHeight + appsys.safeAreaInsets.bottom;
}

// #ifdef APP-NVUE
if (!isCustomHeader) {
	if (sysinfo.osName == 'android') {
		view_height.value = appsys.safeArea.height - 44 - appsys.safeAreaInsets.bottom;
	} else {
		view_height.value = appsys.safeArea.height - 44;
	}
} else {
	view_height.value = appsys.safeArea.height + appsys.statusBarHeight + appsys.safeAreaInsets.bottom;
}
// #endif
// #ifdef APP-VUE
if (!isCustomHeader) {
	view_height.value = appsys.safeArea.height - 44;
} else {
	view_height.value = appsys.safeArea.height + appsys.statusBarHeight + appsys.safeAreaInsets.bottom;
}
// #endif

const _style = computed(() => {
	let style = {};
	if (props.border) {
		style['border'] = `solid ${props.border}rpx`;
		style['border-color'] = computedColor(props.borderColor, '', props.theme);
	}

	if (props.color && !props.linear) {
		style['background-color'] = computedColor(props.color, props.linear ? 'linear' : '', props.theme);
	}
	if (props.color && props.linear) {
		style['background-image'] = computedColor(props.color, props.linear ? 'linear' : '', props.theme);
	}
	return style;
});

let appConfig = ref({
	width: view_width,
	height: view_height,
});
</script>

<style scoped>
.ac-app {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.gray {
	filter: grayscale(100%);
}
</style>
